<template>
  <div>
    <el-dialog
      title="工单详情"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      :close-on-click-modal="false"
      :detailData="detailData"
      :modal-append-to-body="false"
      width="1000px"
    >
      <div class="titleName">
        <p>{{ detailData.device_name }}</p>
        <span>({{ detailData.device_number }})</span>
      </div>
      <div class="messageBox">
        <div>
          <div>
            <span class="title">工单编号</span><span class="content">{{ detailData.order_no }}</span>
          </div>
          <div>
            <span class="title">工单类型</span><span class="content">{{ detailData.order_type_text }}</span>
          </div>
          <div>
            <span class="title">工单来源</span><span class="content">{{ detailData.source }}</span>
          </div>
        </div>
        <div>
          <div>
            <span class="title">合同编号</span
            ><span class="content" v-if="parseInt(OrderDetails.project_contract) !== 0">{{
              OrderDetails.project_contract
            }}</span>
          </div>
          <div>
            <span class="title">产线编号</span><span class="content">{{ OrderDetails.product_line_number }}</span>
          </div>
          <div>
            <span class="title">产线识别码</span><span class="content">{{ OrderDetails.identification_number }}</span>
          </div>
        </div>
        <div>
          <div>
            <span class="title">所属公司</span><span class="content">{{ OrderDetails.customer }}</span>
          </div>
          <div>
            <span class="title">现场联系人</span><span class="content">{{ detailData.contacts }}</span>
          </div>
          <div>
            <span class="title">联系电话</span><span class="content">{{ detailData.contacts_tel }}</span>
          </div>
        </div>
        <div>
          <div>
            <span class="title">设备地址</span><span class="contentLong">{{ detailData.address }}</span>
          </div>
        </div>
      </div>
      <div class="timeLine">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.status === 5 ? '#F56C6C' : activity.color"
            :size="activity.size"
            :timestamp="activity.OperateDate"
            placement="top"
          >
            <div>
              {{ activity.content }}<span class="statusText">{{ activity.textStep }}</span>
            </div>
            <div class="orderStatus">{{ activity.textStatus }}</div>
            <div>
              <div class="describe" v-if="!!activity.operate_content && activity.operate_content.length > 0">
                <div v-if="activity.status === 1">
                  <div v-if="activity.operate_content.length > 0 && activity.operate_content[0].name !== '现场图片'">
                    <div v-if="detailData.order_type_text === '维修工单'" class="label">故障描述</div>
                    <div v-else-if="detailData.order_type_text === '保养工单'" class="label">保养说明</div>
                    <!-- {{ activity.operate_content[0]['content'] }} -->
                    <span>{{ activity.operate_content[0]['content'] }}</span>
                  </div>
                  <div v-else-if="activity.operate_content[0].name === '现场图片'" class="img-div-box">
                    <div class="label">现场图片</div>
                    <div class="rightLabel">
                      <!-- JSON.parse() -->

                      <div
                        class="ScenePictures"
                        v-for="(url, idx) in JSON.parse(activity.operate_content[0].content)"
                        :key="idx"
                        @click="handlePictureCardPreview(url)"
                      >
                        <img :src="url" class="img-width" @click="getBigImg(url)" />
                      </div>
                    </div>
                  </div>

                  <div v-if="activity.operate_content[1]" class="img-div-box">
                    <div class="label">现场图片</div>
                    <div class="rightLabel">
                      <!-- JSON.parse() -->
                      <div
                        class="ScenePictures"
                        v-for="(url, idx) in activity.operate_content[1].content"
                        :key="idx"
                        @click="handlePictureCardPreview(url)"
                      >
                        <img :src="url" class="img-width" />
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="activity.status === 6">
                  <div v-for="(temp, idx) in activity.operate_content" :key="idx">
                    <div class="label">{{ temp.name }}</div>
                    <div class="rightLabel">
                      <span v-if="temp.name !== '现场图片'">{{ temp.content }}</span>
                      <div
                        v-else
                        class="ScenePictures"
                        v-for="(url, index) in JSON.parse(temp.content)"
                        :key="index"
                        @click="handlePictureCardPreview(url)"
                      >
                        <img :src="url" class="img-width" />
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="activity.status === 2">
                  <div>
                    <div class="label">{{ activity.operate_content[0].name }}</div>
                    <span>{{ activity.operate_content[0].content }}</span>
                  </div>
                  <div>
                    <div class="label">
                      {{ activity.operate_content.length >= 2 ? activity.operate_content[1].name : '' }}
                    </div>
                    <!-- style="margin-left: 10px" -->
                    <span
                      v-for="(user, index) in activity.operate_content.length >= 2
                        ? activity.operate_content[1].content
                        : ''"
                      :key="index"
                      >{{ user.name }}</span
                    >
                  </div>
                </div>
                <div v-if="activity.status === 4">
                  <div>
                    <div class="label">{{ activity.operate_content[0].name }}</div>
                    <span>{{ activity.operate_content[0].content }}</span>
                    <div class="partsTableBox">
                      <div class="label">
                        {{ activity.operate_content.length >= 2 ? activity.operate_content[1].name : '' }}
                      </div>
                      <div class="partsTable" v-if="partsTableData.length > 0">
                        <el-table ref="multipleTable" :data="partsTableData" tooltip-effect="dark" class="scroll-bar">
                          <el-table-column label="配件名称" prop="name"> </el-table-column>
                          <el-table-column prop="number" label="物料编号"> </el-table-column>
                          <el-table-column prop="num" label="数量"> </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="activity.status === 5">
                  <div>
                    <div class="label">{{ activity.operate_content[0].name }}</div>
                    <span>{{ activity.operate_content[0].content }}</span>
                  </div>
                </div>
              </div>
              <div v-else style="margin-top: 20px"></div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="
            newStatus === 1 &&
            (this.customer_limit === 3 ||
              this.customer_limit === 2 ||
              (this.customer_limit === 1 && this.OrderDetails.source !== 3))
          "
          type="primary"
          @click="childMethod('assign')"
          >指派工单</el-button
        >
        <el-button
          v-if="
            newStatus === 1 ||
            newStatus === 2 ||
            (newStatus === 3 &&
              (this.customer_limit === 1 ||
                this.customer_limit === 2 ||
                (this.customer_limit === 1 && this.OrderDetails.source !== 3)))
          "
          @click="childMethod('cancel')"
          >取消工单</el-button
        >
        <el-button
          v-if="
            (newStatus === 1 || newStatus === 2) &&
            (this.customer_limit === 1 ||
              this.customer_limit === 2 ||
              (this.customer_limit === 1 && this.OrderDetails.source == 1))
          "
          type="primary"
          @click="childMethod('modify')"
          >修改工单</el-button
        >
        <el-button
          v-if="
            newStatus === 5 &&
            (this.customer_limit === 1 ||
              this.customer_limit === 2 ||
              (this.customer_limit === 1 && this.OrderDetails.source !== 3))
          "
          @click="childMethod('delete')"
          >删除</el-button
        >
        <el-button v-if="newStatus === 5" type="primary" @click="childMethod('recreate')">重新创建工单</el-button>

        <el-button
          v-if="
            newStatus === 4 &&
            this.detailData.order_type === '维修工单' &&
            workB !== 1 &&
            (this.customer_limit === 3 || this.customer_limit === 2)
          "
          type="primary"
          @click="childMethod('knowledge')"
          >转知识库</el-button
        >
      </span>
      <el-dialog :visible.sync="dialogImg" :modal="false" width="30%">
        <img width="100%" style="min-width: 148px" height="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderDetails } from '@/api/orderManage';
export default {
  data() {
    return {
      visible: this.show,
      activities: [
        {
          content: '',
          operate_time: '',
          color: '#67C23A',
          size: 'large',
          type: 'primary'
        }
      ],
      partsTableData: [],
      faultDescription: '', //故障描述
      img: [],
      OrderDetails: {}, //工单详情数据
      newStatus: '',
      last_customer_id: '',
      customer_limit: '', //权限判断参数
      dialogImg: false,
      dialogImageUrl: ''
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    detailData: {}, //组件接受的列表row数据
    TEMPdata: {},
    workB: {}
  },
  watch: {
    show() {}
  },
  created() {
    this.last_customer_id = JSON.parse(localStorage.getItem('userInfo')).last_customer_id;
    if (this.detailData.customer_id !== 1 && this.last_customer_id === this.detailData.customer_id) {
      this.customer_limit = 1; //客户发的客户看
    } else if (this.detailData.customer_id === 1) {
      this.customer_limit = 2; //长泰发的
    } else if (this.detailData.customer_id !== 1 && this.last_customer_id === 1) {
      this.customer_limit = 3; //客户发的长泰看
    }
  },

  mounted() {
    this.OrderDetails = this.TEMPdata || {};
    let that = this;
    that.visible = that.show;

    Number(that.detailData.order_type) === 1
      ? (that.detailData.order_type_text = '维修工单')
      : (that.detailData.order_type_text = '保养工单');
    getOrderDetails(that.detailData.id).then(res => {
      this.OrderDetails = res.data;
      console.log(this.OrderDetails, '详情');
      this.newStatus = this.OrderDetails.status;
      // if (res.data.processing_list.length !== 0) this.newStatus = res.data.processing_list[0].status;
      console.log(this.newStatus, 'new');
      res.data.processing_list.forEach(item => {
        if (item.operate_content !== '') {
          item.operate_content = JSON.parse(item.operate_content);
          item.color = '#67C23A';
          item.size = 'large';
          item.type = 'primary';
          let arr = ['创建工单', '指派工单', '接受工单', '完成工单', '取消工单', '修改工单'];
          let textArr = ['创建', '指派', '接受', '完成', '取消', '修改'];
          item.textStep = arr[parseInt(item.status) - 1];
          item.textStatus = textArr[parseInt(item.status) - 1];
          item.content = item.username;
          switch (item.status) {
            case 1:
              //修改图片链接格式
              if (item.operate_content[1]) {
                item.operate_content[1].content = JSON.parse(item.operate_content[1].content);
              }
              break;
            case 6:
              item.operate_content.forEach(res => {
                res.name === '修改现场照片为' ? (res.content = JSON.parse(res.content)) : res.content;
              });
              break;
            case 2:
              if (item.operate_content.length >= 2) {
                item.operate_content[1].content = JSON.parse(item.operate_content[1].content);
              }
              break;
            case 4:
              // this.partsTableData =JSON.parse(item.operate_content[1].content)
              this.partsTableData = item.operate_content.length >= 2 ? JSON.parse(item.operate_content[1].content) : [];
              console.log('111', this.partsTableData);
              break;
          }
        } else {
          item.color = '#67C23A';
          item.size = 'large';
          item.type = 'primary';
          let arr = ['创建工单', '指派工单', '接受工单', '完成工单', '取消工单', '修改工单'];
          let textArr = ['创建', '指派', '接受', '完成', '取消', '修改'];
          item.textStep = arr[parseInt(item.status) - 1];
          item.textStatus = textArr[parseInt(item.status) - 1];
          item.content = item.username;
        }
      });
      this.activities = res.data.processing_list;

      console.log(this.activities, '!!');
    });
  },
  methods: {
    childMethod(data) {
      this.$emit('sonClick', data);
    },
    getBigImg(url) {
      window.open(url);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file;
      this.dialogImg = true;
      document.querySelector('.el-dialog__wrapper').style.zIndex = '999999';
    }
  }
};
</script>
<style lang="scss" scoped>
.titleName {
  text-align: center;
  margin-bottom: 30px;
}
.titleName > p {
  color: #2454b3;
  font-size: 20px;
  display: inline-block;
}
.messageBox {
  background: #fafafa;
  padding: 20px;
}
.messageBox > div > div {
  display: inline-block;
  width: 33%;
  .title {
    text-align: right;
    width: 40%;
    display: inline-block;
    color: rgb(169, 171, 175);
  }
  .content {
    text-align: left;
    display: inline-block;
  }
  .contentLong {
    display: inline-block;
    width: 40%;
    white-space: nowrap;
  }
}
.messageBox > div > div:nth-child(1) {
  margin-bottom: 10px;
}
.messageBox > div > div > span {
  margin-right: 10px;
}
.messageBox > div > span {
  margin-right: 10px;
}
::v-deep .el-timeline-item__node {
  width: 55px;
  height: 55px;
}
::v-deep .el-timeline-item__wrapper {
  margin-left: 30px;
}
::v-deep .orderStatus {
  position: absolute;
  left: -20px;
  font-size: 15px;
  color: #fff;
  top: 23px;
}
::v-deep .el-timeline-item__tail {
  position: absolute;
  top: 30px;
  left: 25px;
  border-left: 2px solid #67c23a;
}
.describe {
  margin-top: 15px;
  background: #f5f7fa;
  padding: 15px;
}
.describe > div > div:first-child {
  display: inline-block;
}
.describe > div > div {
  margin-bottom: 15px;
  width: 100%;
}
.label {
  font-size: 14px;
  color: #909399;
  margin-right: 10px;
  display: inline-block;
  text-align: right;
  width: 100px;
}
.statusText {
  color: #909399;
  margin-left: 10px;
}
.ScenePictures {
  display: inline-block;
}
.timeLine {
  margin-top: 30px;
  width: 650px;
  margin-left: 180px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0px;
  height: 60vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.partsTable {
  width: 400px;
  display: inline-block;
  vertical-align: top;
}
.partsTableBox {
  margin-top: 10px;
}
::v-deep .table-wrapper .el-table--fit {
  padding: 20px;
}
::v-deep .table-wrapper .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

::v-deep .table-wrapper .el-table tr {
  background-color: transparent !important;
}
::v-deep .table-wrapper .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.img-width {
  width: 148px;
  height: 148px;
}
.img-div-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  .label {
    vertical-align: top;
  }
}

.rightLabel {
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 118px);
}
</style>
